import React, { useEffect, useState } from "react";
import request, { baseUrl } from "../utils/request";
import { Row, Col, Image, Layout, Tag, Space, Button } from 'antd'
import { VerticalAlignBottomOutlined } from '@ant-design/icons';
// import {useSearchParams} from 'react-router-dom'
import { useNavigate, useSearchParams } from "react-router-dom";
const { Sider, Content } = Layout;
function Search() {
    const [params, setParams] = useSearchParams()
    const [kw, setKw] = useState('')
    // console.log(params.get('kw'));

    useEffect(() => {
        setKw(params.get('kw'))
    }, [])

    const navigate = useNavigate()
    const [newlist, setNewlist] = useState([])

    useEffect(() => {
        // console.log(kw);
        request({
            url: '/list/search',
            params: {
                kw,
            }
        }).then(({
            data
        }) => {
            if (data.movielist.data) {

                setNewlist(data.movielist.data)
            } else {
                // console.log(11111);
                setNewlist([])
            }

            // console.log(data, 'setdata');
        })
    }, [kw])
    return (
        <Row gutter={['0px', '30px']}>

            {newlist.map((item, idx) => {
                return (

                    <Col key={idx} push={1} span={11}>
                        <div key={item.movieID}>
                            <Layout style={{
                                borderRadius: '18px',
                                boxShadow: ' 0 7px 21px rgb(149 157 165 / 22%)',
                                background: ' #fff',
                                width: '600px',
                                margin: 'auto',
                                padding: '20px',
                                height: '330px',

                            }}>
                                <Sider style={{ background: ' #fff', }}>
                                    <Col >

                                        <img onClick={() => {
                                            navigate(`/detail/?movieID=${item.movieID}`)
                                        }} src={baseUrl + '/imgs/' + item.imgNames} height={'260px'} width={'180px'} />

                                    </Col>
                                </Sider>
                                <Content >
                                    <Row >
                                        <Col>
                                            <h1><span style={{ fontWeight: '500', fontSize: '22px' }}>{item.title}</span></h1>
                                        </Col>

                                    </Row>
                                    <Row>
                                        <Col push={0} >
                                            <Tag style={{ borderRadius: '50px' }} color="orange">{item.videoClass}</Tag>
                                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.startTime}</Tag>
                                            <Tag style={{ borderRadius: '50px' }} color="geekblue">{item.address}</Tag>
                                        </Col>
                                    </Row>
                                    <Row style={{ marginTop: '13px' }}>
                                        <Col >
                                            导演：
                                        </Col>
                                        <Col>
                                            {item.director}
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            主演：
                                        </Col>
                                        <Col style={{
                                            textAlign: 'left',
                                            overflow: 'hidden',
                                            width: '100%',
                                            height: '20px',

                                        }}>
                                            {item.actors}
                                        </Col>

                                    </Row>
                                    <Row>
                                        <Col>
                                            {item.douban}
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col style={{
                                            textAlign: 'left',
                                            overflow: 'hidden',
                                            width: '100%',
                                            height: '40px',
                                        }
                                        }>
                                            {item.intro}
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <Space>
                                                <Button style={{
                                                    borderRadius: '50px',
                                                    marginTop: '15px',
                                                    color: '#34a853',
                                                    background: '#ecf9f0',
                                                    border: '1px solid #34a853'
                                                }}> <VerticalAlignBottomOutlined />下载</Button>
                                            </Space>
                                        </Col>
                                    </Row>

                                </Content>
                            </Layout>

                        </div>
                    </Col>
                )
            })}

        </Row >
    )
}

export default Search